<template>
  <div class="profile-sidebar" v-once>
    <img :src="optimizedAvatarUrl" alt="用户头像" class="profile-avatar" loading="lazy">
    <h2 class="profile-name">{{ userName }}</h2>
    <p class="profile-role">{{ userRole }}</p>
    <div class="profile-stats">
      <h3>使用统计</h3>
      <ul>
        <li v-for="(stat, key) in statsDisplay" :key="key">
          <span>{{ stat.label }}</span>
          <span>{{ stat.value }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { computed, watch, onMounted } from 'vue'

export default {
  name: 'ProfileSidebar',
  props: {
    avatarUrl: {
      type: String,
      default: 'https://picsum.photos/id/64/200/200'
    },
    userName: {
      type: String,
      default: '张三'
    },
    userRole: {
      type: String,
      default: 'AI产品开发者'
    },
    stats: {
      type: Object,
      default: () => ({
        apiCalls: '1,245',
        activeDays: '45',
        projects: '12',
        points: '3,280'
      }),
      // 深拷贝以避免引用修改导致的重渲染
      required: false
    }
  },
  setup(props) {
    // 计算属性缓存优化的头像URL
    const optimizedAvatarUrl = computed(() => {
      // 添加响应式尺寸参数
      const screenWidth = window.innerWidth
      const avatarSize = screenWidth < 768 ? '150/150' : '200/200'
      
      if (props.avatarUrl.includes('picsum.photos')) {
        // 确保使用正确尺寸
        const idMatch = props.avatarUrl.match(/id\/(\d+)/)
        const id = idMatch ? idMatch[1] : '64'
        return `https://picsum.photos/id/${id}/${avatarSize}`
      }
      return props.avatarUrl
    })
    
    // 计算属性格式化统计数据，避免直接使用对象属性
    const statsDisplay = computed(() => {
      const safeStats = props.stats || {}
      return [
        { key: 'apiCalls', label: 'API调用次数', value: safeStats.apiCalls || '0' },
        { key: 'activeDays', label: '活跃天数', value: safeStats.activeDays || '0' },
        { key: 'projects', label: '项目数量', value: safeStats.projects || '0' },
        { key: 'points', label: '积分', value: safeStats.points || '0' }
      ]
    })
    
    // 使用shallowRef避免深度监听
    let cachedStats = JSON.parse(JSON.stringify(props.stats))
    
    // 自定义深度比较的watch，只在实际变化时更新
    watch(() => props.stats, (newStats, oldStats) => {
      // 深度比较，只有在数据真正变化时才更新
      if (!shallowEqual(newStats, oldStats)) {
        cachedStats = JSON.parse(JSON.stringify(newStats))
      }
    }, { deep: true })
    
    // 简单的浅比较函数
    const shallowEqual = (objA, objB) => {
      if (objA === objB) return true
      if (typeof objA !== 'object' || typeof objB !== 'object' || !objA || !objB) return false
      
      const keysA = Object.keys(objA)
      const keysB = Object.keys(objB)
      
      if (keysA.length !== keysB.length) return false
      
      for (const key of keysA) {
        if (!keysB.includes(key) || objA[key] !== objB[key]) return false
      }
      
      return true
    }
    
    onMounted(() => {
      // 组件挂载时的一次性初始化
      console.log('ProfileSidebar mounted with optimized rendering')
    })
    
    return {
      optimizedAvatarUrl,
      statsDisplay
    }
  }
}
</script>

<style scoped>
.profile-sidebar {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 40px 30px;
  text-align: center;
  border-radius: 12px 12px 0 0;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 20px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.profile-avatar:hover {
  transform: scale(1.05);
}

.profile-name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.profile-role {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 30px;
}

.profile-stats {
  text-align: left;
  margin-top: 40px;
}

.profile-stats h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.profile-stats ul {
  list-style: none;
  padding: 0;
}

.profile-stats li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: padding 0.2s ease;
}

.profile-stats li:last-child {
  border-bottom: none;
}

.profile-stats li:hover {
  padding-left: 5px;
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 768px) {
  .profile-sidebar {
    padding: 30px 20px;
  }
  
  .profile-avatar {
    width: 100px;
    height: 100px;
  }
  
  .profile-name {
    font-size: 20px;
  }
  
  .profile-role {
    font-size: 14px;
  }
  
  .profile-stats h3 {
    font-size: 16px;
  }
}
</style>